<template>
  <div class="workout-plan-container">

      <h1>我的训练计划</h1>

    <!-- 今日训练 -->
    <section class="today-workout glass-card">
      <h2>今日训练</h2>
      <div v-if="todayWorkout" class="workout-card">
        <h3>{{ todayWorkout.title }}</h3>
        <p class="workout-meta">{{ todayWorkout.duration }} · {{ todayWorkout.difficulty }}级</p>
        <div class="exercise-list">
          <div v-for="(exercise, index) in todayWorkout.exercises" :key="index" class="exercise-item">
            <div class="exercise-info">
              <span>{{ exercise.name }}</span>
              <span>{{ exercise.sets }}组 × {{ exercise.reps }}次</span>
            </div>
            <div class="exercise-status">
              <input type="checkbox" :id="'ex-' + index" v-model="exercise.completed">
              <label :for="'ex-' + index"></label>
            </div>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <button class="btn-secondary" @click="completeWorkout">完成训练</button>
          <button class="btn-primary" @click="createNewPlan">+ 新建计划</button>
        </div>
      </div>
      <div v-else class="no-workout">
        <p>今天没有安排训练，休息一下或创建新计划吧！</p>
      </div>
    </section>

    <!-- 周计划 -->
    <section class="weekly-plan glass-card">
      <h2>周训练计划</h2>
      <div class="day-selector">
<div v-for="day in weekDays" :key="day.id" class="day-item" :class="{ active: day.id === currentDay }">
          <span class="day-name">{{ day.name }}</span>
          <span class="day-workout" v-if="day.workout">{{ day.workout }}</span>
          <span class="day-empty" v-else>-</span>
        </div>
      </div>
    </section>

    <!-- 历史记录 -->
    <section class="workout-history glass-card">
      <h2>训练历史</h2>
      <div class="history-list">
        <div v-for="history in workoutHistory" :key="history.id" class="history-item">
          <div class="history-date">{{ history.date }}</div>
          <div class="history-details">
            <h4>{{ history.title }}</h4>
            <p>{{ history.exercises }}个动作 · {{ history.completionRate }}% 完成度</p>
          </div>
          <div class="history-status">{{ history.status }}</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useWorkoutStore } from '@/stores/workout';

const workoutStore = useWorkoutStore();

const currentDay = computed(() => {
  const date = new Date();
  // JavaScript中周日是0，这里转换为1-7对应周一到周日
  return (date.getDay() + 6) % 7 + 1;
});

// 今日训练数据
const todayWorkout = ref({
  title: '上肢力量训练',
  duration: '45分钟',
  difficulty: '中',
  exercises: [
    { name: '哑铃卧推', sets: 4, reps: 12, completed: false },
    { name: '引体向上', sets: 3, reps: 8, completed: false },
    { name: '坐姿划船', sets: 4, reps: 10, completed: false },
    { name: '肩部推举', sets: 3, reps: 10, completed: false },
    { name: '二头弯举', sets: 3, reps: 12, completed: false }
  ]
});

// 周计划数据
const weekDays = ref([
  { id: 1, name: '周一', workout: '上肢力量', active: true },
  { id: 2, name: '周二', workout: '有氧训练', active: false },
  { id: 3, name: '周三', workout: '下肢力量', active: false },
  { id: 4, name: '周四', workout: '休息', active: false },
  { id: 5, name: '周五', workout: '全身训练', active: false },
  { id: 6, name: '周六', workout: '柔韧性', active: false },
  { id: 7, name: '周日', workout: '休息', active: false }
]);

// 训练历史
const workoutHistory = ref([
  { id: 1, date: '2023-11-15', title: '下肢力量训练', exercises: 5, completionRate: 100, status: '已完成' },
  { id: 2, date: '2023-11-13', title: '全身训练', exercises: 6, completionRate: 80, status: '已完成' },
  { id: 3, date: '2023-11-10', title: '上肢力量训练', exercises: 5, completionRate: 100, status: '已完成' }
]);

// 方法
const selectDay = (dayId) => {
  weekDays.value.forEach(day => {
    day.active = day.id === dayId;
  });
  // 在实际应用中，这里会加载对应日期的训练计划
  }


const completeWorkout = () => {
  // 计算完成率
  const totalExercises = todayWorkout.value.exercises.length;
  const completedExercises = todayWorkout.value.exercises.filter(ex => ex.completed).length;
  const completionRate = Math.round((completedExercises / totalExercises) * 100);
  
  // 创建新的历史记录
  const newHistory = {
    id: workoutHistory.value.length > 0 ? Math.max(...workoutHistory.value.map(h => h.id)) + 1 : 1,
    date: new Date().toISOString().split('T')[0],
    title: todayWorkout.value.title,
    exercises: totalExercises,
    completionRate: completionRate,
    status: '已完成'
  };
  
  // 添加到历史记录
  workoutHistory.value.unshift(newHistory);
  
  // 更新store
  workoutStore.incrementCompletedWorkouts();
  
  // 提示用户
  alert(`恭喜完成今日训练！完成率：${completionRate}%`);
  
  // 清空今日训练
  todayWorkout.value = null;
};

const createNewPlan = () => {
  const planTitle = prompt('请输入训练计划名称:');
  if (!planTitle) return;
  
  // 简单创建一个新计划
  todayWorkout.value = {
      title: planTitle,
      difficulty: '中',
      duration: '30分钟',
      exercises: []
    };
    

    // 选择训练难度
    const difficultyOptions = ['初级', '中级', '高级'];
    const difficultyIndex = parseInt(prompt(`请选择训练难度:\n1. ${difficultyOptions[0]}\n2. ${difficultyOptions[1]}\n3. ${difficultyOptions[2]}`), 10);
    if (isNaN(difficultyIndex) || difficultyIndex < 1 || difficultyIndex > 3) {
      alert('请输入1-3之间的有效数字');
      return;
    }
    todayWorkout.value.difficulty = difficultyOptions[difficultyIndex - 1];

    // 根据动作数量和难度计算训练时长
    const baseDurationPerExercise = todayWorkout.value.difficulty === '初级' ? 3 : todayWorkout.value.difficulty === '中级' ? 4 : 5;
    // 获取动作数量
    const exerciseCount = parseInt(prompt('请输入动作数量 (1-10):'), 10);
    if (isNaN(exerciseCount) || exerciseCount < 1 || exerciseCount > 10) {
      alert('请输入1-10之间的有效数字');
      return;
    }
    todayWorkout.value.duration = `${exerciseCount * baseDurationPerExercise + 10}分钟`;

  // 收集每个动作信息
  for (let i = 0; i < exerciseCount; i++) {
    const name = prompt(`请输入动作 ${i+1} 名称:`);
    if (!name) return;

    const sets = parseInt(prompt(`请输入动作 ${i+1} 组数:`), 10);
    if (isNaN(sets) || sets < 1) {
      alert('请输入有效的组数');
      return;
    }

    const reps = prompt(`请输入动作 ${i+1} 次数/时间:`);
    if (!reps) return;

    todayWorkout.value.exercises.push({
      name,
      sets,
      reps,
      completed: false
    });
  }
}

</script>

<style scoped>
:host {
  --primary: #00cec9;
  --secondary-dark: #00b8b3;
  --success: #00b42a;
  --gray-50: #f8f9fa;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --white: #ffffff;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-2xl: 2rem;
  --font-weight-medium: 500;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --transition-normal: 0.3s ease;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --radius-md: 0.375rem;
  --radius-full: 9999px;
}

.workout-plan-container {
  padding: 2rem;
  max-width: 100%;
  margin: 300px auto 0;
  padding-bottom: 92px;

}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.glass-card {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.btn-primary {
  background-color: #00cec9;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: #00b8b3;
  transform: translateY(-2px);
}

.today-workout h2,
.weekly-plan h2,
.workout-history h2 {
  margin-bottom: 1.5rem;
  color: white;
  font-size: 1.5rem;
}

.workout-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: white;
}

.workout-meta {
  color: white;
  margin-bottom: 1rem;
  font-style: italic;
}

.exercise-list {
  margin-bottom: 1.5rem;
}

.exercise-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.exercise-info {
  display: flex;
  flex-direction: column;
}

.exercise-info span:first-child {
  font-weight: 500;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.exercise-info span:last-child {
  font-size: var(--font-size-sm);
  color: white;
}

.exercise-status input {
  display: none;
}

.exercise-status label {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid white;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-normal);
  color: white;
}

.exercise-status input:checked + label {
  background-color: var(--primary);
}

.exercise-status input:checked + label::after {
  content: '✓';
  position: absolute;
  top: -5px;
  left: 3px;
  color: white;
}

.no-workout {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--gray-500);
  background-color: var(--gray-50);
  border-radius: var(--radius-md);
}

.day-selector {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-sm);
}

.day-item {
  padding: 0.5rem 0.25rem;
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-item.active {
  background-color: var(--primary);
  color: white;
  transform: scale(1.05);
}

.day-name {
  display: block;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-xs);
  color: white;
}

.day-item.active .day-name {
  color: var(--white);
}

.day-workout {
  font-size: var(--font-size-sm);
  color: white;
}

.day-empty {
  font-size: var(--font-size-sm);
  color: var(--gray-400);
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal);
}

.history-item:hover {
  transform: translateX(5px);
}

.history-date {
  font-weight: var(--font-weight-medium);
  color: var(--gray-500);
  min-width: 60px;
  font-size: var(--font-size-sm);
}

* {
  box-sizing: border-box;
}

.history-details {
  flex-grow: 1;
  margin: 0 var(--spacing-lg);
}

.history-details h4 {
  margin-bottom: var(--spacing-xs);
  color: white;
  font-size: var(--font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-details p {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.8);
}

.page-header h1 {
  font-size: var(--font-size-2xl);
}

.history-status {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background-color: rgba(0, 180, 42, 0.1);
  color: var(--success);
}

.btn-secondary {
  background-color: var(--success);
  color: white;
  border: none;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  margin-top: var(--spacing-md);
}

.btn-secondary:hover {
  background-color: var(--secondary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 400px) {
  .workout-plan-container {
  margin-top: 80px;
  padding: 0.5rem;
  overflow-x: hidden;
}
  
  .day-selector {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.07vw;
}
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .page-header h1 {
  font-size: 1.25rem;
}

.btn-primary {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
}
  
  .glass-card {
  padding: 0.75rem;
  max-width: 100%;
}
  
  .exercise-item {
  padding: 2.13vw 0;
}
  
  .history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .history-date {
    min-width: auto;
  }
  
  .history-details {
    margin: 0;
  }
}
</style>